<template>

 <div class="dashboard">
     
    <div class="title1">
      <h2>管理员功能</h2>
    </div>
      
      <!-- <div class="warning">
        <svg-icon icon-class="icon-warn"></svg-icon>
        <p class="warning-info">
          
        </p>
       
    </div> -->
    
    <div class="chart">
      <div class="title">
      <p>累计用户数量</p>
      <span>2643</span>
      <p>，昨日新增</p>
      <span>165</span>
      <p>。</p>
      <br>
       
    </div>
    <img class="logo" src="@/assets/icons/21.png" alt="Logo" />
    </div>

    <div class="uchart">
     <h3 style="margin-bottom: 0.2rem">用户管理</h3>
         
          <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          max-height="550">
          <el-table-column
            label="日期"
            prop="date">
          </el-table-column>
          <el-table-column
            label="类型"
            prop="vip">
          </el-table-column>
          <el-table-column
            label="用户名"
            prop="name">
          </el-table-column>
          <el-table-column
            align="right">
            <template slot="header" slot-scope="">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入用户名搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">管理</el-button>
              <el-button
                size="mini"
                type="danger"
               @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
       
    
    </div>
  
</div>


</template>

<script>
 export default {
   name:"user",
    data() {
      return {
        tableData: [{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },
         {
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },
        {
          date: '2022-03-06',
          name: '王小虎',
          vip:'会员'
        },
        {
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },
        {
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },
        {
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },
        {
          date: '2022-03-06',
          name: '王小虎',
          vip:'会员'
        },
        {
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },{
          date: '2022-03-06',
          name: '王小虎',
          vip:'普通'
        },
         ],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
  
</script>



<style scoped>

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}



.logo {
  width: 58rem;
  height: 15rem;
  
}

.uchart {
  position: relative;
  flex-shrink: 0;
  display: flex;
  margin-top: 1rem;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 25rem;
  max-height:50rem;
  padding: 2rem;
  border-radius: 16px;
  color:rgb(75, 75, 75);
  /* margin-bottom: 1rem; */
  background-color: var(--BG);
}
.chart {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 44.5rem;
  height: 25rem;
  padding: 2rem;
  border-radius: 16px;
  background-color: var(--BG);
}
.dashboard {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-width: 44.5rem;
  padding: 0 2rem;
}
.title1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
}

h2 {
  display: inline;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.box {
  text-align: center;
  height: 10rem;
  padding: 4rem;
  border-radius: 16px;
  color: rgb(82, 82, 82);
  background-color: var(--BG);
}
.warning {
  position: absolute;
  right: 2rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  height: 3rem;
  padding-left: 1.2rem;
  border-radius: 14px;
  background-color: var(--BG);
}
.warning.close {
  display: none;
}
.warning-info {
  margin: 0 1rem;
  color: var(--Gray-7);
  font-size: 0.875rem;
  line-height: 2rem;
  letter-spacing: 1px;
  font-weight: 500;
}
.close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--Gray-7);
  border-radius: 100%;
  background-color: var(--Gray-2);
  cursor: pointer;
}
.close:hover {
  background-color: var(--Gray-3);
}
.title {
  display: flex;
  align-items: baseline;
  height: 3rem;
}
.title > p {
  color: var(--Gray-7);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 2px;
}
.title > span {
  margin: 0 0.5rem;
  color: var(--Gray-8);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 3rem;
  letter-spacing: 2px;
}
.svg-box {
  overflow: hidden;
  position: absolute;
  top: 6rem;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 40.25rem;
  height: 22.25rem;
}
.svg {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 0;
}
.date {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 40.25rem;
}
.date > p {
  color: var(--Gray-5);
  font-size: 0.875rem;
  line-height: 0.875rem;
  font-weight: 500;
  text-align: center;
  min-width: 2.5rem;
}
.hover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  width: 40.25rem;
  height: 31.5rem;
}
.hover-li {
  display: block;
  width: 100%;
  height: 25rem;
  margin-top: 5.6875rem;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 12px;
  opacity: 0;
  box-shadow: 0 16px 37px 0 var(--Theme-A2);
}
.hover-li:hover {
  opacity: 1;
}

#stop1 {
  stop-color: var(--Theme-A2);
}
#stop2 {
  stop-color: rgba(255, 255, 255, 0);
}
#border {
  fill: none;
  stroke-width: 4px;
  stroke: var(--Theme-6);
}
#shadow {
  fill: var(--Theme-A2);
  filter: url(#blur);
}
#m-circle {
  fill: var(--Theme-6);
}
</style>